<template>
  <div class="leadsIndex">
    <a-breadcrumb class="location">
      <a-breadcrumb-item>Dashboard</a-breadcrumb-item>
      <a-breadcrumb-item>Live Feed</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 分类 -->
    <div class="fenlei">
      <a-row type="flex" :gutter="30" class="newTab">
        <a-col :span="12">
          <a-row :gutter="30" class="ltab">
            <a-col :span="4" class="thecol">
              <div class="item">
                <div class="tit">New Leads</div>
                <div class="txt">{{ sumamary.newLeads ? sumamary.newLeads : 0 }}</div>
              </div>
            </a-col>

            <a-col :span="4" class="thecol">
              <div class="item">
                <div class="tit">All Leads</div>
                <div class="txt">{{ sumamary.allLeads ? sumamary.allLeads : 0 }}</div>
              </div>
            </a-col>

            <a-col :span="4" class="thecol">
              <div class="item">
                <div class="tit">Activity Leads</div>
                <div class="txt">{{ sumamary.activityLeads ? sumamary.activityLeads : 0 }}</div>
              </div>
            </a-col>
          </a-row>
        </a-col>

        <a-col :span="12">
          <a-row :gutter="30" class="rtab">
            <a-col :span="4" class="thecol rtc">
              <div class="item">
                <div class="tit">Visits Today</div>
                <div class="txt">{{ sumamary.visitArrives ? sumamary.visitArrives : 0 }}</div>
              </div>
            </a-col>

            <a-col :span="4" class="thecol rtc">
              <div class="item">
                <div class="tit">Searches Today</div>
                <div class="txt">{{ sumamary.searchs ? sumamary.searchs : 0 }}</div>
              </div>
            </a-col>

            <a-col :span="4" class="thecol rtc">
              <div class="item">
                <div class="tit">Properties Viewed Today</div>
                <div class="txt">{{ sumamary.properties ? sumamary.properties : 0 }}</div>
              </div>
            </a-col>
          </a-row>
        </a-col>

      </a-row>
    </div>

    <!-- 列表 -->
    <div class="bottomBox">
      <a-row :gutter="30" class="box">
        <a-col class="linfo" :span="12">
          <div class="gutter">
            <a-row class="head">
              <a-col :span="12" class="title">Live Feed</a-col>
              <a-col :span="12" class="rfilters clearfix">
                <div class="btn" @click="showFilterDrawer">Filter</div>
              </a-col>
            </a-row>

            <!-- 展示 -->
            <div class="list" v-if="dataList.length">
              <div class="item" v-for="(item, index) in dataList" :key="index">
                <div class="nm">{{item.userId}}</div>
                <div class="viewed">
                  <!-- <img :src="(item.opt_code == 1) ? '~@/assets/img/dashboard-type1.png' : (item.opt_code == 2 ? '~@/assets/img/dashboard-type3.png' : '~@/assets/img/dashboard-type3.png' ) " alt="" class="pic"/> -->
                  <img src="~@/assets/img/dashboard-type3.png" alt="" class="pic"/>
                  {{item.optTag}}
                </div>
                <div class="time">{{item.createTime}}</div>
                <!-- <div class="mls">MLS#R2408894-$495,000-3757 Eucild Avenue Unit 407,Vancouver,BC,V5R 6H5-Condo</div> -->
                <div class="mls">{{item.optCont}}</div>
              </div>
            </div>

            <div class="nodata" v-else>
              There are no Live Feed to display.
            </div>

          </div>
        </a-col>

        <a-col class="rshow" :span="7">
          <div class="gutter">
            <div class="title">Upcoming Follow-ups</div>
            <!-- <div class="list" v-if="allFollowList.length">
              <div class="item" v-for="(item2, index2) in allFollowList" :key="index2">
                <div class="tit">{{item2.flwTitle}}</div>
                <div class="content">{{item2.actNotes}}</div>
              </div>
            </div> -->

            <div class="list" v-if="allFollowList.length">
              <div class="item" v-for="(item2, index2) in allFollowList" :key="index2">
                <div class="tobox">
                  <div class="title">{{item2.leadId}}</div>
                  <div class="totla">
                    <div class="time">{{item2.actTime}}</div>
                    <div class="note">{{item2.flwTitle}}</div>
                  </div>
                  <div class="type">Call</div>
                </div>

                <div class="repbox">
                  <div class="rw" v-show="item2.repeatEndTime">
                    <div class="ltit">RepeatEndtime</div>
                    <div class="rcontent">{{item2.repeatEndTime}}</div>
                  </div>

                  <div class="rw" v-show="item2.timeBefore">
                    <div class="ltit">Reminders</div>
                    <div class="rcontent">{{item2.reminders}}/4 {{item2.timeBefore}}</div>
                  </div>
                </div>

                <div class="edit">
                  Edit
                </div>

                <div class="maskbox">
                  {{item2.actNotes}}
                </div>
              </div>
            </div>

            <div class="noentries" v-else>
              There are no entries to display.
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- filters -->
    <a-drawer
      title="Filters"
      :placement="placement"
      :closable="false"
      @close="onClose"
      :visible="visible"
      :zIndex="drawzIndex"
      class="filteBoxs"
    >
      <a-row class="types leadsType">
        <a-col :span="9" class="tit">Type</a-col>
        <a-col :span="15">
          <el-select placeholder="select" multiple v-model="selectTypeList">
            <el-option label="Select all" value="all"></el-option>
            <el-option v-for="(item1, index1) in actType" :label="item1.label" :value="item1.value" :key="index1"></el-option>
          </el-select>
        </a-col>
      </a-row>

      <a-row class="allAgent">
        <a-col :span="9" class="tit">Agent</a-col>
        <a-col :span="15">
          <a-dropdown :trigger="agentTrigger">
            <a-menu slot="overlay" @click="agentMenuClick">
              <a-menu-item key="1">all</a-menu-item>
              <a-menu-item key="0">me</a-menu-item>
            </a-menu>
            <a-button class="agebtned"> {{isAllAgent == 1 ? 'all' : 'me'}} <a-icon type="down" /> </a-button>
          </a-dropdown>
          </a-col>
      </a-row>

      <a-row class="save" @click.native="saveHandle">save</a-row>
    </a-drawer>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        dataList: [],
        allFollowList: [],
        sumamary: {},
        visible: false,
        placement: 'left',
        drawzIndex: 9999999999,
        typeTrigger: ['click'],
        agentTrigger: ['click'],
        actType: [],
        showType: '',
        selectTypeList: [],
        allType: [],
        isAllAgent: 0
      }
    },
    watch:{
      selectTypeList:function(val,oldval){
        if(val.indexOf('all') != -1 && oldval.indexOf('all') == -1 && val.length > 1){                      //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
          this.selectTypeList = ['all']
        } else if (val.indexOf('all') != -1 && oldval.indexOf('all') != -1 && val.length > 1){        //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1  则移除掉勾选所有
          this.selectTypeList.splice(val.indexOf('all'),1)
        }
      }
    },
    activated () {
      this.initList()
    },
    methods: {
      initList () {
        // 1 获取站点数据
        this.$http({
          url: this.$http.adornUrl('/xdc/sumamarySituation'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            // console.log('----- 获取站点数据成功 -----', data)
            this.sumamary = data.sumamary
          } else {
            console.log('----- 获取站点数据失败 -----', data.msg)
          }
        })

        // 2 Live Feed
        var params = {
          'actCode': this.selectTypeList,
          'allAgent': this.isAllAgent // 0-经纪人自己  1-所有人
        }
        // console.log('----- 获取 LiveFeed 传参 -----', params)

        this.$http({
          url: this.$http.adornUrl('/crm/activity/getLiveFeed'),
          method: 'post',
          data: this.$http.adornData(params)
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log('----- 获取 LiveFeed 成功 -----', data)

            this.actType = data.actType
            // 存储
            var actType = data.actType
            localStorage.setItem('actTypeList', JSON.stringify(data.actType))
            var allType = []
            if(actType && actType.length) {
              actType.map((item, index, arr) => {
                allType.push(item.value)
              })
            }

            this.allType = allType

          } else {
            console.log('----- 获取 LiveFeed 失败 -----', data.msg)
            this.actType = []
          }
        })

        this.getFollowUpList()
        this.getLieFeedList()

      },

      getLieFeedList () {

        // 2 Live Feed
        if(this.selectTypeList && this.selectTypeList.length && this.selectTypeList.length == 1) {
          if(this.selectTypeList[0] == 'all') {
            this.selectTypeList = this.allType
          }
        }

        var params = {
          'actCode': this.selectTypeList,
          'allAgent': this.isAllAgent // 0-经纪人自己  1-所有人
        }
        // console.log('----- 获取 LiveFeed 传参 -----', JSON.stringify(params))

        this.$http({
          url: this.$http.adornUrl('/crm/activity/getLiveFeed'),
          method: 'post',
          data: this.$http.adornData(params)
        }).then(({data}) => {
          if (data && data.code === 0) {
            // console.log('----- 获取 LiveFeed 成功 -----', data)
            var dataList = data.liveFeeds
            // if(dataList && dataList.length) {
            //   // dataList.map((item, index, arr) => {
            //   //   // item.res_rs = JSON.parse(item.res_rs)
            //   // })
            //   console.log(dataList)
            // }
            this.dataList = data.liveFeeds
            // console.log(JSON.stringify( this.dataList))
          } else {
            console.log('----- 获取 LiveFeed 失败 -----', data.msg)
            this.actType = []
            this.dataList = []
          }
        })
      },

      // 获取Follow-up列表
      getFollowUpList () {

        this.$http({
          url: this.$http.adornUrl('/crm/activity/getNextFollowups'),
          method: 'post',
          data: this.$http.adornData({})
        }).then(({ data }) => {
          if (data && data.code === 0) {
            // console.log('----- 获取Follow-up列表成功 -----', data)
            this.allFollowList = data.page.list
          } else {
            console.log('----- 获取Follow-up列表失败 -----', data)
            this.$message.error(data.msg)
          }

        })
      },

      showFilterDrawer() {
        this.visible = true
      },
      onClose() {
        this.visible = false
      },
      onChange(e) {
        this.placement = e.target.value
      },
      typeMenuClick(e) {
        console.log('----- 选择type -----', e)
        var idx = +e.key
        var actType = this.actType
        if(actType && actType.length) {
          actType.map((item, index, arr) => {
            if(index === idx) {
              this.showType = item.label
              this.selectTypeList.push(item.value)
            }
          })
        }
      },
      agentMenuClick(e) {
        console.log('----- 是否看全部代理的 -----', e)
        this.isAllAgent = e.key
      },
      saveHandle () {
        this.visible = false
        this.getLieFeedList()
      }
    }
  }
</script>

<style lang="less" scoped>
.leadsIndex {
  .location {
  }

  // 分类
  .fenlei {
    width: 1110px;
    .newTab {
      padding-top: 20px;
      margin-left: 0 !important;
      margin-right: 0 !important;
      margin-bottom: 30px;
      .ltab {
        .thecol {
          width: 160px;
          height: 80px;
          margin-right: 30px;
          padding-left: 0 !important;
          padding-right: 0 !important;
          &:last-child {
            margin-right: 0;
          }
          .item {
            width: 160px;
            height: 80px;
            padding-top: 12px;
            text-align: center;
            background:rgba(255,248,245,1);
            border-radius:2px;
            color: rgba(250,84,28,1);
            .tit {
              font-size: 12px;
              font-weight: 400;
              margin-bottom: 6px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .txt {
              font-size: 24px;
            }
          }
        }
      }
      .rtab {
        .thecol {
          width: 160px;
          height: 80px;
          margin-right: 30px;
          padding-left: 0 !important;
          padding-right: 0 !important;
          &:last-child {
            margin-right: 0;
          }
          .item {
            width: 160px;
            height: 80px;
            padding-top: 12px;
            text-align: center;
            background: #F6FFED;
            color:rgba(56,158,13,1);
            border-radius:2px;
            .tit {
              font-size: 12px;
              font-weight: 400;
              margin-bottom: 6px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .txt {
              font-size: 24px;
            }
          }
        }
      }
    }
  }

  // 列表
  .bottomBox {
    width: 1110px;
    .box {
      height: 640px;
      box-sizing: border-box;
      margin-left: 0px !important;
      margin-right: 0px !important;
      .linfo,
      .rshow {
        padding-left: 10px !important;
        padding-right: 10px !important;
        height: 640px;
        padding-top: 16px;
        background: rgba(243,246,253,1);
        border-radius: 2px;
        overflow-y: auto;
        .gutter {
          height: 100%;
        }
      }
      .linfo {
        width: 545px;
        margin-right: 30px;
        margin-bottom: 10px;
        .gutter {
          width: 520px;
          position: relative;
          .head {
            margin-bottom: 20px;
            .title {
              padding-left: 11px;
              font-size: 16px;
              font-weight: bold;
              color: rgba(56,65,87,1);
            }
            .rfilters {
              cursor: pointer;
              .btn {
                width: 80px;
                height: 24px;
                line-height: 24px;
                background: rgba(24,144,255,1);
                border-radius: 2px;
                font-size: 14px;
                color: rgba(255,255,255,1);
                text-align: center;
                float: right;
              }
            }
          }
          // 展示
          .list {
            .item {
              width: 520px;
              padding: 14px 10px 15px 10px;
              background:rgba(255,255,255,1);
              border-radius:2px;
              position: relative;
              color:rgba(70,70,70,1);
              margin-bottom: 10px;
              &:last-child {
                border: 0;
              }
              .nm {
                font-size: 14px;
                font-weight: bold;
                text-decoration: underline;
                color: rgba(24,144,255,1);
              }
              .viewed {
                padding: 8px 13px;
                background: rgba(255,255,255,1);
                border: 1px solid rgba(243,246,253,1);
                border-radius: 0px 4px 0px 0px;
                font-size: 14px;
                color: rgba(56,65,87,1);
                position: absolute;
                top: 0;
                right: -1px;
                z-index: 999;
                .pic {
                  width: 16px;
                  height: 13px;
                  background: #17B3A3;
                }
              }
              .time {
                font-size: 14px;
                font-weight: bold;
                color: rgba(123,133,157,1);
                margin-bottom: 9px;
              }
              .mls {
                font-size: 14px;
                font-weight: bold;
                color: rgba(123,133,157,1);
              }
            }
          }
          .nodata {
            padding-top: 53px;
            text-align: center;
            font-size: 16px;
            color: rgba(192,198,212,1);
          }
        }
      }
      .rshow {
        width: 520px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        // padding: 20px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: rgba(56,65,87,1);
          margin-bottom: 20px;
        }

        .list {
          .item {
            padding-top: 6px;
            background:rgba(255,255,255,1);
            border-radius:2px;
            margin-bottom: 10px;
            position: relative;
            // overflow: hidden;
            .tobox {
              padding: 0 10px 5px;
              border-bottom: 1px solid #F3F6FD;
              .title {
                font-size:14px;
                font-weight:bold;
                color:rgba(56,65,87,1);
                margin-bottom: 10px;
              }

              .totla {
                margin-bottom: 15px;
                .time {
                  width: 135px;
                  font-size:14px;
                  color:rgba(56,65,87,1);
                  display: inline-block;
                }
                .note {
                  padding: 0 10px;
                  font-size:14px;
                  color:rgba(123,133,157,1);
                  display: inline-block;
                  position: relative;
                  &::before {
                    content: '';
                    width: 1px;
                    height: 14px;
                    background:rgba(56,65,87,1);
                    position: absolute;
                    top: 3px;
                    left: 0;
                    z-index: 999;
                  }
                }
              }

              .type {
                font-size:16px;
                font-weight:bold;
                text-decoration:underline;
                color:rgba(24,144,255,1);
              }

            }

            .repbox {
              padding: 6px 10px;
              .rw {
                margin-bottom: 2px;
                .ltit {
                  display: inline-block;
                  width: 140px;
                  font-size:14px;
                  color:rgba(152,161,184,1);
                }
                .rcontent {
                  display: inline-block;
                  font-size:14px;
                  color:rgba(123,133,157,1);
                }
              }
            }

            .edit {
              width: 60px;
              height:28px;
              line-height: 28px;
              text-align: center;
              background:rgba(255,255,255,1);
              border:1px solid rgba(243,246,253,1);
              border-radius:0px 2px 0px 2px;
              font-size:14px;
              color:rgba(56,65,87,1);
              position: absolute;
              top: 0;
              right: 0;
              z-index: 999;
            }

            .maskbox {
              width: 100%;
              height: 100%;
              background: rgba(76,84,103,.8);
              position: absolute;
              left: 0;
              bottom: 0;
              z-index: 999;
              opacity: 0;
              overflow-y: auto;
              padding: 10px;
              white-space: normal;
              font-size: 14px;
              color:#fff;
            }

            &:hover {
              .maskbox {
                opacity: 1;
              }
            }
          }
        }

        .noentries {
          padding-top: 53px;
          text-align: center;
          font-size: 16px;
          color: rgba(192,198,212,1);
        }
      }
    }
  }
}
.ant-drawer {
  position: absolute;
  top: 100px;
  left: 100px;
}
// filters
.types {
  margin-bottom: 30px;
  .tit {
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: rgba(56,65,87,1);
  }
}
.allAgent {
  margin-bottom: 30px;
  .tit {
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: rgba(56,65,87,1);
  }
  .agebtned {
    width: 130px;
    height: 30px;
    line-height: 30px;
    background:rgba(243,246,253,1);
    border-radius:2px;
    border: 0;
    font-size:14px;
    font-weight:bold;
    color:rgba(56,65,87,1);
  }
}
.save {
  width: 120px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  background: rgba(24,144,255,1);
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  font-size:14px;
  color:rgba(255,255,255,1);
}
.el-select .el-input__inner {
  background:rgba(243,246,253,1)!important;
}

</style>
